import React from "react";
import Barcode from "react-barcode";
import Container from '../../components/Base/Container';
import styles from "./VipCode.less";
import QRCoder from '../../components/Base/QRCode'

class VipCode extends React.Component {
  replace = (str) => {
    let index = 0
    let newStr = ''
     for (const v of str) {
        index++
        newStr += v
        if (index === 4) {
           newStr += ' '
           index = 0
        }
     }

     return newStr
  }
  render() {
    const { shopName, card_id } = this.props.location.query;
    console.log(shopName, card_id)
    const qrcode = require('../../assets/new/vip_qrcode.png')
    const header = require('../../assets/new/vip_header.png')
    return (
        <div>
          {/* 传入id生成条形码 */}
          {/* <div className={styles["brcode"]}>
            <Barcode
              value={card_id}
              height={100}
              background={"rgba(255, 255, 255, 0)"}
            />
          </div> */}

        <Container title='会员条码'>
        <div className={styles['qrcode_wrap']}>
          <div className={styles['qrcode_header']}>
            {/* 此处是二维码 */}
            <img src={header} alt='header'/>

          </div>
          <div className={styles['qrcode_body']}>
            <div className={styles['qrcode_item']}>
              <div className={styles['qrcode_img']}>
                {/* <img src={qrcode} alt='qrcode'/> */}
                <QRCoder value={card_id}></QRCoder>
                </div>
              <div className={styles['number']}>{this.replace(card_id)}</div>
              <div className={styles['own']}>已绑定身份</div>
              <div>白金卡</div>
            </div>
          </div>
        </div>
        </Container>
        </div>
    );
  }
}

export default VipCode;
